/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-06-13 09:48:00
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-06-13 14:59:39
 * @FilePath: \vite-project\src\components\common\ImagePreview.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Icon } from '@iconify/react/dist/iconify.js';
import { Alert, Card, Empty, Space } from 'antd';
import { useState } from 'react';

const InvoicePreview: React.FC<{ previweSrc: string }> = ({ previweSrc }) => {
	const [scale, setScale] = useState(1);
	const [rotate, setRotate] = useState(0);
	const [dis, setDis] = useState({ x: 0, y: 0 });

	const handleLeftRotate = () => {
		setRotate(rotate - 90);
	};
	const handleRightRotate = () => {
		setRotate(rotate + 90);
	};
	const handleZoomIn = () => {
		setScale(scale + 0.1);
	};
	const handleZoomOut = () => {
		setScale(scale - 0.1 < 0.2 ? 0.2 : scale - 0.1);
	};
	const handleReset = () => {
		setScale(1);
		setRotate(0);
		setDis({
			x: 0,
			y: 0,
		});
	};
	const moveImg = (ev: any) => {
		const { x, y } = dis;
		ev.preventDefault();
		var disx = ev.pageX - x;
		var disy = ev.pageY - y;
		document.onmousemove = (ev: any) => {
			setDis({
				x: ev.pageX - disx,
				y: ev.pageY - disy,
			});
		};
		document.onmouseup = () => {
			document.onmousemove = null;
			document.onmousedown = null;
		};
	};

	return (
		<Card>
			<Alert
				message="发票智能上传图片，PDF、OFD格式，大小不超过20M， 如果发票识别不成功或识别有误，请手动填写。"
				type="info"
				className="mb-20px"
			/>
			{previweSrc ? (
				<div className="relative overflow-hidden bg-[#f5f5f5]">
					<div
						className="h-70vh"
						draggable={true}
						onMouseDown={moveImg}
						style={{
							backgroundImage: `url(${previweSrc})`,
							backgroundSize: '100% auto',
							backgroundRepeat: 'no-repeat',
							transform: `rotate(${rotate}deg) scale(${scale}) translate(${dis.x}px, ${dis.y}px)`,
							transformOrigin: 'center',
						}}></div>
					<Space
						split={<div className="w-1px h-14px bg-white mx-12px opacity-40"></div>}
						className="absolute bottom-0 transform -translate-x-1/2 left-50% bg-black text-white p-12px rounded-4px">
						<Icon onClick={handleLeftRotate} icon={'ant-design:rotate-left-outlined'} className="text-20px cursor-pointer" />
						<Icon onClick={handleRightRotate} icon={'ant-design:rotate-right-outlined'} className="text-20px cursor-pointer" />
						<Icon onClick={handleZoomIn} icon={'ant-design:zoom-in-outlined'} className="text-20px cursor-pointer" />
						<Icon onClick={handleZoomOut} icon={'ant-design:zoom-out-outlined'} className="text-20px cursor-pointer" />
						<Icon onClick={handleReset} icon={'ant-design:reload-outlined'} className="text-20px cursor-pointer" />
					</Space>
				</div>
			) : null}
		</Card>
	);
};

export default InvoicePreview;
